<template>
	<view class="">
		<view class="" style="padding: 30rpx;color: blue;">
			<text>针对当前的评论所做的各种回复</text>
		</view>
		<view class="comment-item">
			<view class="comment_avatar"
			v-if='commentData.user_id&&commentData.user_id.length!=0'>
				<image :src="commentData.user_id[0].avatar?commentData.user_id[0].avatar:'../../static/image/mine1.png'" mode="aspectFit" class="image"></image>
			</view>
			<view class="comment_infor">
				<view class="top">
					<text class="font_title" v-if='commentData.user_id&&commentData.user_id.length!=0'>
					{{commentData.user_id[0].username}}
					</text>
					<view class="dianzan" v-if="commentData._id&&commentData._id['comments-like']">
						<uni-icons type="hand-up-filled" size="24" class='icon'
						:color="filterStatus(commentData._id['comments-like'])?'red':''"></uni-icons>
						<text class="dianzancount">{{commentData.like_count}}</text>
					</view> 
				</view>
				<view class="content">
					<text>{{commentData.comment_content}}</text>
				</view>
				<view class="otherinfor">
					<uni-dateformat :date="commentData.comment_date" :threshold = "[60000, 3600000]"
					format='yyyy/MM/dd hh:mm' class="time font_title"></uni-dateformat>
					<text class="ip font_title">{{commentData.comment_ip}}</text>
				</view>
			</view>
		</view>
		<view class="" style="display: flex;align-items: center;padding:30rpx;">
			<uni-easyinput v-model="articalcomment" placeholder="输入你对这条评论的看法" style="flex:1;margin-right: 20rpx;"/>
			<text @click="complete(0,commentData.user_id[0],commentData._id._value,commentData.article_id,commentData)">完成</text>
		</view>
		<!-- 针对该评论的回复 -->
		<view class="otherComment">
			<text>全部回复</text>
			<view class="" v-for="(item,index) in otherCommentList" :key="index">
				<view class="comment-item">
					<view class="comment_avatar"
					v-if='item.user_id&&item.user_id.length!=0'>
						<image :src="item.user_id[0].avatar?item.user_id[0].avatar:'../../static/image/mine1.png'" mode="aspectFit" class="image"></image>
					</view>
					<view class="comment_infor">
						<view class="top">
							<text class="font_title" v-if='item.user_id&&item.user_id.length!=0'>
							{{item.user_id[0].username}}
							</text>
							<view class="dianzan" v-if="item._id&&item._id['comments-like']"
							 @click="dianzanComment(item._id._value,item._id['comments-like'],item.article_id,item)">
								<uni-icons type="hand-up-filled" size="24" class='icon'
								:color="filterStatus(item._id['comments-like'])?'red':''"></uni-icons>
								<text class="dianzancount">{{item.like_count}}</text>
							</view> 
						</view>
						<view class="content">
							<text>{{item.comment_content}}</text>
						</view>
						<view class="otherinfor">
							<uni-dateformat :date="item.comment_date" :threshold = "[60000, 3600000]"
							format='yyyy/MM/dd hh:mm' class="time font_title"></uni-dateformat>
							<text class="ip font_title">{{item.comment_ip}}</text>
							<view class="reply" @click="reply(item._id._value,index)">
								<text class="reply_text">{{replyIndex==index?'取消回复':'回复'}}</text>
							</view>
						</view>
						<view v-if="replyIndex==index" style="display: flex;align-items: center;padding:30rpx;">
							<uni-easyinput v-model="comment" placeholder="对他做个回复吧" style="flex:1;margin-right: 20rpx;"/>
							<text @click="complete(1,item.user_id[0],item._id._value,item.article_id,item)">完成</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	const db = uniCloud.database();
	const add = uniCloud.importObject('addInc') //第一步导入云对象
	export default{
		data(){
			return {
				commentData:{},
				articalcomment:'',//针对文章的评论
				comment:'',
				comment_id:'',//当前的评论id
				article_id:'',
				user_id:'',//当前评论的user_id,
				otherCommentList:[],
				replyIndex:null,
			}
		},
		computed:{
			...mapGetters({
				infor:'user/info'
			})
		},
		methods:{
			filterStatus(data){
				// console.log(data,this.infor.uid,698)
				var index = data.findIndex(item => item.user_id=== this.infor.uid)
				if(index==-1){
					return false
				}else{
					return true
				}
			},
			// 查询当前评论
			async getComment(){
				let comment = db.collection('opendb-news-comments').where(`_id=="${this.comment_id}"`).getTemp()
				let user=await db.collection('uni-id-users').field('_id,username,avatar,register_ip').getTemp()
				let commentlike=await db.collection('comments-like').getTemp()
				// 查询当条评论
				let data=await db.collection(comment,user,commentlike).get()
				console.log(data,985)
				this.commentData=data.result.data[0]
			},
			// 查询当条评论下的回复
			async getcomment_reply(){
				let user=await db.collection('uni-id-users').field('_id,username,avatar,register_ip').getTemp()
				let commentlike=await db.collection('comments-like').getTemp()
				let otherComment=db.collection('opendb-news-comments').where(`reply_comment_id=="${this.comment_id}" && comment_type==1 && isShow==false`).orderBy('comment_date desc').getTemp()
				let res=await db.collection(otherComment,user,commentlike).get()
				console.log(res,6666)
				this.otherCommentList=res.result.data
			},
			complete(index,user_id,comment_id,article_id,resulte){
				console.log(user_id._id,comment_id,article_id,resulte)
				if(index==0){//针对文章的当前评论的评论
					if(!this.articalcomment){
						uni.showToast({
							title:'不能为空',
							icon:'none'
						})
						return
					}
					db.collection('opendb-news-comments').add({
						article_id:article_id,
						user_id:this.infor.uid,//评论者id
						comment_content:this.articalcomment,
						comment_type:1,// //针对评论的回复，
						// reply_comment_id:comment_id,// 被回复的评论ID
						reply_comment_id:this.comment_id,// 一级的评论id
						reply_user_id:user_id._id,//被回复的评论用户ID,不是当前用户
					}).then(async res=>{
						console.log(res)
						// 一级评论相关的总数+1
						add.addInc('opendb-news-comments','secondComment',this.comment_id,1)
						await this.getcomment_reply()
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('acceptDataFromOpenedPage', {comment_id:comment_id,type:'comment',handleType:'add'});
					}).catch(err=>{
						console.log(err)
					})
				}else{//针对其他评论的回复
					if(!this.comment){
						uni.showToast({
							title:'不能为空',
							icon:'none'
						})
						return
					}
					this.replyIndex=null
					db.collection('opendb-news-comments').add({
						article_id:article_id,
						user_id:this.infor.uid,
						comment_content:this.comment,
						comment_type:1,// //针对评论的回复，
						// reply_comment_id:comment_id,// 被回复的评论ID
						reply_comment_id:this.comment_id,//  一级的评论id
						reply_user_id:user_id._id,//被回复的评论用户ID
					}).then(async res=>{
						console.log(res)
						// 一级评论相关的总数+1
						add.addInc('opendb-news-comments','secondComment',this.comment_id,1)
						await this.getcomment_reply()
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('acceptDataFromOpenedPage',{comment_id:comment_id,type:'comment',handleType:'add'});
					}).catch(err=>{
						console.log(err)
					})
				}
			},
			// 针对评论的回复
			reply(comment_id,index){
				// console.log(index,this.replyIndex)
				if(this.replyIndex==index){
					this.replyIndex=null
				}else{
					this.replyIndex=index
				}
			},
			// 针对评论的回复的点赞
			async dianzanComment(comment_id,data,article_id,resulte){//当前的评论id，对该条评论的点赞表，文章id
				console.log(comment_id,data,article_id,resulte)
				// return
				var index = data.findIndex(item => item.user_id=== this.infor.uid)
				if(index!=-1){//点过赞
					//点赞总数-1
					add.addInc('opendb-news-comments','like_count',comment_id,-1)
					let res=await db.collection('comments-like').where({
						user_id:this.infor.uid,
						comment_id:comment_id,
						article_id:article_id
					}).remove()
					var comment_index = data.findIndex(item => item.comment_id===comment_id)
					// 删除数据
					data.splice(comment_index,1)
					resulte.like_count=(resulte.like_count?resulte.like_count:0)-1
					console.log(res,'评论取消点赞')
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('acceptDataFromOpenedPage',{comment_id:comment_id,type:'dianzan',handleType:'reduce',extroinfo:{
						user_id:this.infor.uid,
					}});
				}else{
					add.addInc('opendb-news-comments','like_count',comment_id,1)
					let res=await db.collection('comments-like').add({
						user_id:this.infor.uid,
						comment_id:comment_id,
						article_id:article_id,
						islike:true
					})
					// 新增数据
					data.push({
						user_id:this.infor.uid,
						comment_id:comment_id,
						article_id:article_id,
						islike:true
					})
					resulte.like_count=(resulte.like_count?resulte.like_count:0)+1
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('acceptDataFromOpenedPage',{comment_id:comment_id,type:'dianzan',handleType:'add',extroinfo:{
						user_id:this.infor.uid,
						comment_id:comment_id,
						article_id:article_id,
						islike:true
					}});
					console.log(res,'评论增加点赞')
				}
			},
		},
		async onLoad(options) {
			let newData=JSON.parse(options.data)
			// console.log(newData)
			this.comment_id=newData.comment_id
			this.article_id=newData.article_id
			this.user_id=newData.user_id
			await this.getComment()
			// 查询当前评论下的评论信息
			await this.getcomment_reply()
		}
	}
</script>

<style scoped lang="scss">
	.comment-item{
		display: flex;
		align-items: flex-start;
		margin-top: 30rpx;
		.comment_avatar {
			.image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
		.comment_infor{
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				
			}
			.content{
				overflow: hidden;
				display:-webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				margin: 20rpx 0;
			}
			.otherinfor{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.ip{
					margin: 0 20rpx;
				}
				.reply{
					min-width: 120rpx;
					padding:0 16rpx;
					height:40rpx;
					border-radius: 16rpx;
					background-color: #f5f5f5;
					text-align: center;
					color: #1f1f1f;
					.reply_text{
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	.otherComment{
		padding: 0 30rpx;
	}
</style>